<template>
	<!-- <view class="titlebar" :style="'height: ' + navigationBarHeight + '; background-color: rgba(255, 255, 255, ' + opacity +  ')'"> -->
	<view class="titlebar" :style="'height: ' + navigationBarHeight + '; background-color:  ' + backgroundColor  + '; top:  ' + top+'px' ">
		<view :style="'height: ' + statusBarHeight"></view>
		<view class="title-container">
			<view class="capsule" v-if="back || home">
				<view @tap="goBack" v-if="back">
					<uni-icons class="capsuleimage" type="arrowleft" size="23" :color='color'></uni-icons>
				</view>
			</view>

			<view class="icon" @click="$emit('rightIconClick')">
				<image style="width: 24px;height: 24px;" :src="img" mode=""></image>
			</view>

			<view v-if="mode==''" class="title" :style='"color:" + color + ";font-size:" + fontSize +"rpx"'>{{text}}</view>
			<view v-else>
				<slot name="title"></slot>
			</view>
		</view>
	</view>
</template>


<script>
	const app = getApp()
	export default {
		props: {
			text: {
				type: String,
				value: ''
			},
			mode: {
				type: String,
				value: '',
				default: ''
			},
			back: {
				type: Boolean,
				// value: false,
				default: false
			},
			home: {
				type: Boolean,
				value: false
			},
			typeBar: {
				type: Number,
				value: 1,
			},
			opacity: {
				type: Number,
				value: 0,
			},
			color: {
				type: String,
				value: '#000',

			},
			fontSize:{
				type: String,
				value: '26',
			},
			img: {
				type: String,
				value: ''
			},
			backToIndex: {
				type: Boolean,
				default: false
			},

			backgroundColor: {
				type: String,
				value: 'rgba(255, 255, 255, 0)',
			},
			top: {
				type: Number,
				value: 0,
			},
			topicBackTo: {
				type: String,
				value: '',
			},
		},
		data() {
			return {
				statusBarHeight: '20px',
				navigationBarHeight:'84px',
				system: '',
				// topicBackTo: "",
			}
		},
		mounted() {
			console.log('attached');
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					// 开启安全区域的情况下,statusBarHeight为0
					// console.log(res, 'getSystemInfo:'+JSON.stringify(res));
					var barHeight =  res.statusBarHeight==0?res.safeAreaInsets.top:res.statusBarHeight;
					
					that.statusBarHeight =barHeight+"px";
					console.log("that.statusBarHeight:"+that.statusBarHeight);
					that.navigationBarHeight = (barHeight+44)+"px";
				}
			})
		},
		methods: {
			setBackTo: function(topicBackTo) {
				this.topicBackTo = topicBackTo
			},
			backHome: function() {
				wx.reLaunch({
					url: '/pages/index/index',
				})
			},
			goBack: function() {
				// #ifdef MP-WEIXIN
				var pages = getCurrentPages();
				if(pages.length==1){
					wx.switchTab({
						url: '/pages/community/community',
					})
					
					return
				}
				// #endif
				if (this.backToIndex) {

					wx.switchTab({
						url: '/pages/community/community',
					})
				} else {
					wx.navigateBack({
						delta: 1
					})
				}

			}
		}
	}
 

	// export default global['__wxComponents']['components/titlebar/titlebar'];
</script>
<style>
	@import "./titlebar.css";
</style>
